<!--
 * @Author: Yang Zhang
 * @Date: 2021-11-24 23:46:33
 * @LastEditors: Yang Zhang
 * @LastEditTime: 2021-12-23 22:10:30
 * @Description: 
-->
<template>
  <div
    class="pro_item choose"
    :class="choseStatus && haschosed && nowchosedarr.indexOf(item.storeGoodsId) > -1 ? 'choosed' : ''"
    v-for="item in prolist"
    :key="item.id"
    @click.stop="clickItem(item.id, item.storeGoodsId)"
  >
    <div class="realinfo flex-sp-c">
      <div class="img">
        <img :src="item.thumbnail" />
        <div class="status" v-if="type === 'myproduct'">{{ item.state ? 'ONLINE' : 'OFFLINE' }}</div>
      </div>
      <div class="right-info">
        <div class="proname overfl-oneline">{{ item.goodsName }}</div>
        <div class="prodesc overfl-oneline">{{ item.sellingPoint }}</div>
        <div class="prosize">${{ item.price }}</div>
        <div class="comm">Commission {{ item.commissionRate }}%</div>
        <div class="rightbtminfo" v-if="type === 'index'">Order {{ item.buyCount }}</div>
        <div
          class="rightbtminfo rec-addBtn"
          v-if="type === 'product'"
          @click.stop="addPro(item.id)"
        >Add</div>
        <div
          class="rightbtminfo linkBtn"
          v-if="type === 'myproduct'"
          @click.stop="selectTag(item.storeGoodsId)"
        >select tag</div>
      </div>
    </div>
    <div class="selecttags" v-if="addTagstatus && nowselectId === item.storeGoodsId">
      <a-select
        mode="multiple"
        placeholder="Please select some tags"
        @change="handletagChange"
        class="selects"
        :value="selectedTags"
        @deselect="deselect"
        dropdownClassName="dropdownClassName"
      >
        <a-select-option v-for="(item,index) in tagsArrs" :key="item.id">{{ item.tagName }}</a-select-option>
      </a-select>
      <div class="selectbtns btn-primary" @click.stop="addTags(item.storeGoodsId)">Add</div>
      <div class="selectbtns" @click.stop="cancelSel">Cancel</div>
    </div>
    <img src="../../assets/product/chose.png" class="chose" v-if="choseStatus" />
    <img
      src="../../assets/product/chosed.png"
      class="chose"
      v-if="choseStatus && haschosed && nowchosedarr.indexOf(item.storeGoodsId) > -1"
    />
  </div>
</template>

<script lang='ts'>
import { message } from "ant-design-vue";
import { watch } from "vue";
import { defineComponent, onMounted, PropType, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import { addProduct, addTagtoPro, delTagrel, getAllstoretags, getProtagsarr } from "../../api/product";
import { IProductitem, ITag, ITagitem } from '../../views/types'
export default defineComponent({
  name: 'kolProitem',
  props: {
    prolist: {
      type: Array as PropType<IProductitem[]>
    },
    type: {
      type: String,
      default: 'index'
    },
    canchose: {
      type: Boolean,
      default: false
    },
    tagsArr: {
      type: Array,
      default: []
    }
  },
  emits: ['addSuccess', 'changechosedstatus'],
  setup(props, context) {
    const { prolist, canchose, tagsArr } = toRefs(props)
    const router = useRouter()

    // 添加商品
    const addPro = async (id: any) => {
      const res = await addProduct({ goodsId: id })
      if (res) {
        context.emit('addSuccess')
      }
    }



    // 可选择状态
    const choseStatus = ref(false)
    // 是否已经选中
    const haschosed = ref(false)
    const nowChosedid = ref('')
    const nowchosedarr = ref<string[]>([])
    onMounted(() => {
      choseStatus.value = canchose.value
    })

    watch(
      () => props.canchose,
      (canchose, precanchose) => {
        choseStatus.value = canchose
      }
    )

    watch(
      () => nowchosedarr,
      (arr, prearr) => {
        console.log(arr.value)
      }
    )

    const tagsArrs = ref<any[]>()
    watch(
      () => props.tagsArr,
      (arr, prearr) => {
        tagsArrs.value = arr
      }
    )
    const clickItem = (id: any, storeGoodsId: any) => {
      if (choseStatus.value) {
        // 如果是可选择状态,先看是否已经选中
        // 点击就变成了已经选中
        if (nowchosedarr.value.indexOf(storeGoodsId) > -1) {
          // 取消选中
          const index = nowchosedarr.value.indexOf(storeGoodsId)
          console.log(nowchosedarr.value.splice(index, 1), nowchosedarr.value)
        } else {
          nowChosedid.value = storeGoodsId
          nowchosedarr.value = [...nowchosedarr.value, storeGoodsId]
          haschosed.value = true
          context.emit('changechosedstatus', haschosed.value)
        }
      } else if (!choseStatus.value && !addTagstatus.value) {
        console.log(!choseStatus.value && !addTagstatus.value)
        router.push(`/product/detail?id=${id}`)
      }
    }

    // 选择所有
    const selectallPro = () => {
      if (nowchosedarr.value.length !== prolist.value?.length) {
        haschosed.value = true
        nowchosedarr.value = []
        prolist.value?.map(item => {
          nowchosedarr.value.push(item.storeGoodsId)
          console.log(nowchosedarr.value)
        })
        context.emit('changechosedstatus', haschosed.value)
      } else {
        haschosed.value = false
        nowchosedarr.value = []
        context.emit('changechosedstatus', haschosed.value)
      }
    }

    // 恢复初始状态
    const resetStatus = () => {
      choseStatus.value = false
      haschosed.value = false
      nowChosedid.value = ''
      nowchosedarr.value = []
      context.emit('changechosedstatus', haschosed.value)
    }


    const handletagChange = (val: any) => {
      selectedTags.value = val
    }


    // 是否处于选择添加标签状态
    const addTagstatus = ref(false)
    const selectedTags = ref<string[]>([])
    const nowselectedTag = ref<string[]>([])
    const nowselectId = ref('')
    const addTags = async (id: string) => {
      const param = {
        storeGoodsId: id,
        ids: selectedTags.value || []
      }
      const res = await addTagtoPro(param)
      if (res) {
        message.success(res.message)
        addTagstatus.value = false
      }
    }
    const cancelSel = () => {
      selectedTags.value = []
      nowselectedTags.value = []
      addTagstatus.value = !addTagstatus.value
    }

    const nowselectedTags = ref<ITagitem[]>([])
    const selectTag = async (id: string) => {
      if (addTagstatus.value) {
        nowselectId.value = ''
        nowselectedTags.value = []
      } else {
        nowselectId.value = id
        const res = await getProtagsarr(id)
        if (res) {
          nowselectedTags.value = res.result
          let arr: any[] = []
          nowselectedTags.value.map(item => {
            arr = [...arr, item.tagName]
          })
          selectedTags.value = arr
        }
      }
      addTagstatus.value = !addTagstatus.value
    }

    const deselect = async (val: any) => {
      let id
      nowselectedTags.value.map(item => {
        if (item.tagName === val) {
          id = item.id
        }
      })
      console.log(id)
      const storegoodsid = nowselectId.value
      delTagrel(storegoodsid, id)
    }
    return {
      deselect, tagsArrs, addTags, selectedTags, addTagstatus, nowselectId, selectTag, cancelSel, nowselectedTag,
      handletagChange, addPro, choseStatus, haschosed, clickItem, nowChosedid, nowchosedarr, selectallPro, resetStatus, tagsArr
    }
  }
})
</script>
<style lang='scss' scoped>
.pro_item {
  width: 100%;
  border: 1px solid #e0e0e0;
  padding: 15px 16px;
  margin-bottom: 20px;
  .img {
    width: 113px;
    height: 113px;
    margin-right: 20px;
    position: relative;
    img {
      width: 113px;
      height: 113px;
    }
    .status {
      width: 114px;
      height: 27px;
      color: #ffffff;
      background: #000000;
      opacity: 0.5;
      font-size: 12px;
      font-family: Galvji;
      font-weight: 400;
      position: absolute;
      bottom: 0;
      left: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
  .right-info {
    flex: 1;
    height: 113px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .proname {
      width: 543px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
    .prodesc {
      width: 543px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: normal;
      color: #000000;
    }
    .prosize {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
    .comm {
      font-size: 16px;
      font-family: Galvji;
      font-weight: bold;
      color: #e60044;
    }
    .rightbtminfo {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #e60044;
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .rightbtminfo.linkBtn {
      font-size: 14px;
      font-family: Galvji;
      font-weight: 400;
      text-decoration: underline;
      color: #e60044;
      cursor: pointer;
    }
    .rightbtminfo.rec-addBtn {
      width: 80px;
      height: 40px;
      border-radius: 20px;
      border: 1px solid #e0e0e0;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .rec-addBtn:hover {
      background-color: #000;
      color: #fff;
    }
  }
  .selecttags {
    width: 100%;
    height: 42px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    .selects {
      width: 474px;
      border-radius: 0 !important;
    }
    .selects.ant-select-focused {
      border: 1px solid #e60044;
      .ant-select-selector {
        border: none;
      }
    }
    .ant-select-selection-overflow {
      height: 40px;
      line-height: 40px;
    }
    .selectbtns {
      width: 92px;
      height: 40px;
      border-radius: 3px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e0e0e0;
      margin-left: 10px;
      cursor: pointer;
      font-size: 14px;
    }
    .selectbtns.btn-primary {
      background: #e60044;
      border: none;
      color: #fff;
    }
  }
}

.choose {
  position: relative;
  .chose {
    width: 41px;
    height: 34px;
    position: absolute;
    top: -1px;
    right: -1px;
  }
}
.choosed {
  border: 1px solid #e60044;
}

.dropdownClassName {
  border: 1px solid #000;
}
</style>

<style lang="scss">
.selects {
  .ant-select-selector {
    .ant-select-selection-overflow {
      height: 28px;
      line-height: 28px;
      .ant-select-selection-overflow-item {
        height: 28px !important;
        line-height: 28px !important;
        .ant-select-selection-item {
          height: 28px !important;
          line-height: 28px !important;
        }
      }
    }
  }
}
</style>